<!-- Favorites.vue -->
<template>
  <div class="favorites-management">
    <div class="card">
      <div class="card-header">
        <h2>我的收藏</h2>
        <button class="btn-refresh" @click="fetchFavorites">
          <i class="icon-refresh"></i> 刷新
        </button>
      </div>

      <div class="table-container">
        <table>
          <thead>
          <tr>
            <th>标题</th>
            <th>类型</th>
            <th>收藏时间</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="favorite in favorites" :key="favorite.id">
            <td>{{ favorite.title }}</td>
            <td>
                <span class="type-tag" :class="favorite.type">
                  {{ formatType(favorite.type) }}
                </span>
            </td>
            <td>{{ $formatDate(favorite.collectTime) }}</td>
            <td>
              <button class="btn-view" @click="handleView(favorite)">
                <i class="icon-eye"></i> 查看
              </button>
              <button class="btn-remove" @click="handleRemove(favorite)">
                <i class="icon-trash"></i> 取消
              </button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <div class="pagination">
        <button @click="prevPage" :disabled="currentPage === 1">
          <i class="icon-chevron-left"></i>
        </button>
        <span>第 {{ currentPage }} 页</span>
        <button @click="nextPage" :disabled="favorites.length < pageSize">
          <i class="icon-chevron-right"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Favorites',
  data() {
    return {
      favorites: [],
      currentPage: 1,
      pageSize: 10,
      loading: false
    }
  },
  created() {
    this.fetchFavorites();
  },
  methods: {
    async fetchFavorites() {
      const storedUser = localStorage.getItem('user');
      this.user = storedUser ? JSON.parse(storedUser) : null;
      const uid = storedUser ? JSON.parse(storedUser).uid : null;

      try {
        const response = await this.$axios.get(`/api/percenter/favorites`, {
          params: { uid }
        });
        this.favorites = response.data.data;
      } catch (error) {
        // this.$message.error('获取收藏失败');
        console.log(error.message);
      }
    },
    formatType(type) {
      const types = {
        'post': '帖子',
        'video': '视频',
        'article': '文章',
        'image': '图片'
      };
      return types[type] || type;
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.fetchFavorites();
      }
    },
    nextPage() {
      this.currentPage++;
      this.fetchFavorites();
    }
  }
}
</script>

<style scoped>
.favorites-management {
  padding: 20px;
}

.type-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.type-tag.post {
  background-color: #4caf50;
}

.type-tag.video {
  background-color: #f44336;
}

.type-tag.article {
  background-color: #ff9800;
}

.type-tag.image {
  background-color: #2196f3;
}

.btn-remove {
  padding: 6px 12px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
}

.btn-remove i {
  margin-right: 5px;
}
</style>